<script setup lang="ts" name="DetailPage">
import {
    useIntersectionObserver,
    UseIntersectionObserverReturn,
    useWindowScroll,
} from '@vueuse/core';

import Menu from '@/components/menu/index.vue';
import PageFooter from '@/components/PageFooter.vue';

import type { MenuOption } from '@/components/menu/MenuItem.vue';
import { onMounted, onUnmounted, ref } from 'vue';

const menus = <MenuOption[]>[
    { label: '校料广场', value: 'section-1' },
    { label: '自由发帖', value: 'section-2' },
    { label: '评论点赞', value: 'section-3' },
    { label: '深情表白', value: 'section-4' },
    { label: '趣味社区', value: 'section-5' },
];

const { y } = useWindowScroll({
    behavior: 'smooth',
});

const selectedMenu = ref(menus.at(0));

function handleMenuClick(menu: MenuOption) {
    const target = document.querySelector(`#${menu?.value}`);
    const rect = target?.getBoundingClientRect();
    const top = (rect?.top ?? 0) + window.scrollY;
    y.value = top;
}

const navRef = ref<HTMLElement | null>(null);
let navObserver: UseIntersectionObserverReturn | null = null;

function observeNavbar() {
    if (navRef.value == null) return;

    const scrollWatcher = document.createElement('div');
    scrollWatcher.setAttribute('data-scroll-watcher', '');

    navRef.value?.before(scrollWatcher);
    navObserver = useIntersectionObserver(
        scrollWatcher,
        ([{ isIntersecting }]) => {
            navRef.value?.classList.toggle('!py-4', !isIntersecting);
            navRef.value?.classList.toggle('!text-xl', !isIntersecting);
            navRef.value?.classList.toggle('!font-bold', !isIntersecting);
            navRef.value?.classList.toggle(
                '!backdrop-blur-sm',
                !isIntersecting,
            );
            navRef.value?.classList.toggle('!bg-white/50', !isIntersecting);
            navRef.value?.classList.toggle('!shadow-lg', !isIntersecting);
            navRef.value?.classList.toggle(
                '!shadow-slate-200/40',
                !isIntersecting,
            );
        },
    );
}

onMounted(() => {
    observeNavbar();
});

onUnmounted(() => {
    navObserver?.stop();
});

let sectionObserver: UseIntersectionObserverReturn | null = null;

function observeSections() {
    const sections = document.querySelectorAll('section');
    if (!sections.length) return;

    sectionObserver = useIntersectionObserver(
        [...sections],
        ([{ isIntersecting, target }]) => {
            if (!isIntersecting) return;

            const id = target.getAttribute('id');
            selectedMenu.value = menus.find(item => item.value === id);
        },
        {
            threshold: 0.3,
        },
    );
}

onMounted(() => {
    observeSections();
});

onUnmounted(() => {
    sectionObserver?.stop();
});
</script>

<template>
    <div class="detail-page">
        <nav
            ref="navRef"
            class="fixed inset-x-0 w-full px-[52px] py-6 text-3xl z-[9998] ease-linear duration-150"
        >
            <Menu
                v-model="selectedMenu"
                :options="menus"
                @onClick="handleMenuClick"
            />
        </nav>
        <section
            id="section-1"
            class="relative bg-[url('@/assets/images/illustrations/illustrations_10.png')] bg-no-repeat bg-[length:100%_100%]"
        >
            <div class="flex items-end mx-auto space-x-12 w-[1340px]">
                <div class="shrink-0 translate-y-10">
                    <img
                        src="@/assets/images/illustrations/illustrations_11.png"
                        alt=""
                    />
                </div>
                <div class="mb-20 space-y-10 w-[472px]">
                    <span class="text-[#1B790B]">
                        <h6 class="leading-7 text-2xl font-normal">
                            让有趣的灵魂自由发 "<strong>料</strong>"
                        </h6>
                        <h6 class="leading-7 text-2xl font-normal">
                            让你的青春之光照亮整个校园
                        </h6>
                    </span>
                    <p>
                        Haddin校料平台为学生提供表达情感、寻求帮助、分享心情、求职趣闻、新闻资讯、活动组织线上交流、知识分享等各类服务的互联网平台。为学生提供了一个安全、方便的方式来表达自己的感情,在校料平台上，学生们可以匿名或实名发布表白信息，包括对喜欢的人的描述、表白的话语等。这些信息通常会被展示在学校的公共区域，以便让更多的人看到。
                    </p>
                    <span
                        class="block px-16 py-4 w-fit text-xl leading-6 text-[#34C666] rounded-[3.25rem] cursor-pointer bg-white shadow-lg shadow-slate-100"
                        >立刻体验</span
                    >
                </div>
            </div>
        </section>
        <section id="section-2">
            <div class="flex flex-col mx-auto py-8 w-[1440px]">
                <div class="flex items-center">
                    <ul class="flex flex-col ms-20 gap-y-10">
                        <li>
                            <span
                                class="leading-5 text-base font-normal text-slate-950"
                            >
                                校料一箩筐“双料”成长课
                                <strong class="text-2xl text-[#34C666]">
                                    校料、
                                </strong>
                                <strong class="text-2xl text-[#34C666]">
                                    爆料、
                                </strong>
                                <strong class="text-2xl text-[#34C666]">
                                    职场料、
                                </strong>
                                <strong class="text-2xl text-[#34C666]">
                                    新闻、
                                </strong>
                                <strong class="text-2xl text-[#34C666]">
                                    趣闻、
                                </strong>
                                <strong class="text-2xl text-[#34C666]">
                                    就业课
                                </strong>
                            </span>
                        </li>
                        <template
                            v-for="item in [
                                {
                                    title: '生活信息类',
                                    desc: '如寻物、求助、吐槽、分享心事、趣人趣事等， 这样学生们就能在上面交流互动',
                                },
                                {
                                    title: '新闻资讯类',
                                    desc: '帮助学生了解校园内外的最新动态。一些学生会通过校料平台分享学校的最新政策、考试信息、社会热点等，帮助其他同学了解时事并做好准备。这种功能有助于增加学生之间的信息流通和共享。',
                                },
                                {
                                    title: '幽默调侃类',
                                    desc: '校料平台也可以成为学生们调侃和幽默的平台。 一些学生会通过校料平台分享自己的搞笑经历、趣闻趣事等，引发 其他同学的共鸣和欢笑。这种功能有助于缓解学习压力，增加学生 之间的情感交流和友谊',
                                },
                                {
                                    title: '职场求职类',
                                    desc: '在平台上可以有师哥师姐加入进来， 帮助大家介绍求职就业的相关讯息，同时也可以 为学生提供更具锻炼价值的实习或工作机会， 让平台成为链接校友情谊的桥梁。',
                                },
                            ]"
                        >
                            <li>
                                <strong class="leading-4 text-base font-bold"
                                    >{{ item.title }}:
                                </strong>
                                <small>{{ item.desc }}</small>
                            </li>
                        </template>
                    </ul>
                    <div class="shrink-0 h-[54.375rem]">
                        <img
                            class="h-full"
                            src="@/assets/images/illustrations/illustrations_12.png"
                            alt=""
                        />
                    </div>
                </div>
                <div class="shrink-0 h-[60rem] relative">
                    <img
                        class="h-full -translate-x-40"
                        src="@/assets/images/illustrations/illustrations_13.png"
                        alt=""
                    />
                    <div
                        class="absolute top-[32%] right-40 space-y-6 w-[30rem] text-slate-950"
                    >
                        <span class="leading-5 text-base">
                            随时随地
                            <strong
                                class="leading-7 text-2xl font-bold text-[#34C666]"
                            >
                                发布校料
                            </strong>
                            让有趣的灵魂更自由
                        </span>
                        <p class="leading-5 text-base">
                            <strong class="font-bold">校料平台</strong>
                            是一个完全开放式的平台，不仅可以满足学生们情感交流和信息发布的需求，还可以作为活动组织、宣传推广、互助平台和创意展示等多种用途的平台。消息内容有系统自动审核+人工审核两种方式。保证消息遵守相关法规和道德准则的前提下可以让学生自由发声，让消息分享更加及时高效。
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section
            id="section-3"
            class="bg-[url('@/assets/images/illustrations/illustrations_15.png')] bg-no-repeat bg-[length:100%_100%]"
        >
            <div class="mx-auto w-[1240px]">
                <div class="flex flex-row-reverse">
                    <img
                        class="h-full"
                        src="@/assets/images/illustrations/illustrations_14.png"
                        alt=""
                    />
                    <div class="mt-40 ms-40 space-y-6">
                        <h2 class="text-3xl font-bold text-[#34C666]">
                            私论点赞
                        </h2>
                        <p class="leading-5 text-slate-950">
                            实名或匿名发布消息、尊重和保护发布者的隐私和个人情感评论提供私评，保证特殊场景下沟通的安全。同时也会让沟通充满乐趣。点赞、转发、评论等各种互动方式可以保证信息的快速流通。消息置顶，让学生不会错过每一条重要的信息。
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-4">
            <div class="mx-auto py-28 w-[1240px]">
                <div class="relative translate-x-36">
                    <img
                        class="h-full"
                        src="@/assets/images/illustrations/illustrations_16.png"
                        alt=""
                    />
                    <div
                        class="absolute top-12 right-56 mt-40 ms-40 space-y-6 w-72"
                    >
                        <h2 class="text-3xl font-bold text-[#34C666]">
                            表白墙
                        </h2>
                        <p class="leading-5 text-slate-950">
                            让你的故事闪耀。在这里，你可以发布动态，分享你所经历的新奇事物、有趣的经历和琐碎的日常。你也可以与其他用户互动，留下评论和点赞，一起分享彼此的生活点滴
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section id="section-5">
            <div class="relative">
                <img
                    src="@/assets/images/illustrations/illustrations_17.png"
                    alt=""
                />
                <p
                    class="absolute top-[28rem] left-[22rem] leading-5 text-slate-950 w-96"
                >
                    <strong>寻物系列、</strong>
                    <strong>表白系列、</strong>
                    <strong>二手交易、</strong>
                    <strong>情感分享、</strong>
                    <strong>个人感悟、</strong>
                    <strong>吐槽趣闻、</strong>
                    <strong>知识分享技术交流、</strong>
                    <strong>文化共鸣、</strong>
                    <strong>创意展示、</strong>
                    <strong>校园资讯、</strong>
                    活动组织等等各类分类应有尽有。方便学生快速找到自己喜欢的板块。让学生更快结识更多志同道合的人，扩大社交圈子，增加交友机会。消息一键搜素，可以帮助学生快速找到自己喜欢的内容。
                </p>
            </div>
        </section>
        <PageFooter />
    </div>
</template>

<style scoped></style>
